<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>首屏</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/index.css">
	<script src="js/jquery-1.8.0.min.js"></script>
</head>
<body>
<!-- 头部 -->
<div class="warp_top">
 	<h3>
 		<a href="javascript:;">信息概述</a>&nbsp;&gt;&nbsp;<a href="javascript:;">统计分析</a>
 	</h3>
 	<div class="info_warp">
 		<div class="title clear">
			<div class="left">信息总览</div>
			<ul class="right clear">
				<Li>注册用户</Li>
				<Li>订单量</Li>
				<Li>支付订单</Li>
				<Li>完成订单</Li>
				<Li>浏览量(PV)</Li>
				<Li>访问量(UV)</Li>
			</ul>
 		</div>
 		<div class="content clear">
			<div class="left">
				<div class="a-font">今日</div>
				<div class="a-font">统计</div>
			</div>
			<ul class="right">
				<li>
					<div class="b-font">140</div>
					<div class="c-font">63</div>
				</li>
				<li>
					<div class="b-font">140</div>
					<div class="c-font">63</div>
				</li>
				<li>
					<div class="b-font">140</div>
					<div class="c-font">63</div>
				</li>
				<li>
					<div class="b-font">140</div>
					<div class="c-font">63</div>
				</li>
				<li>
					<div class="b-font">140</div>
					<div class="c-font">63</div>
				</li>
				<li>
					<div class="b-font">140</div>
					<div class="c-font">63</div>
				</li>
			</ul>
 		</div>
 	</div>
</div>
<div class="content_title clear">
	<div class="box1 active"><a href="">今日</a></div>
	<div class="box2"><a href="">本周</a></div>
	<div class="box3"><a href="">本月</a></div>
	<div class="box4 clear">
		<label for="">
			<input type="text" id="start-data" placeholder="年-月-日">
		</label>
		<span>-</span>
		<label for="">
			<input type="text" id="end-data" placeholder="年-月-日">
		</label>
		<button class="btn-s">查找</button>
	</div>
</div>
<div class="bottom_warp clear">
	<div class="content_module1 l">
        <div class="eachts-catgory">
            <div class="left clear">
                <div class="cat_btn active"><a href="">浏览量(PV)</a></div>
                <div class="cat_btn"><a href="">访问量(UV)</a></div>
                <div class="cat_btn"><a href="">注册用户</a></div>
                <div class="cat_btn"><a href="">订单量</a></div>
                <div class="cat_btn xw_btn">
                    <span>其他</span>
                    <div class="x_btn">v</div>
                    <div class="cat_option">支付订单</div>
                    <div class="cat_option">完成订单</div>
                </div>
            </div>
            <div class="right clear">
                <span>对比:</span>
                <label for="">
                    <input type="radio" name="date" checked>前一日&nbsp;
                </label>
                <label for="">
                    <input type="radio" name="date">&nbsp;上周周期&nbsp;
                </label>
            </div>
        </div>
		<div  id="chart_form"  style="height:240px;"></div>
	</div>
	<div class="content_module2 r">
		<div class="title">产品销量排行</div>
		<ul>
			<li><i>1</i><em>就业将之01</em><span>01</span></li>
			<li><i>2</i><em>就业将之02</em><span>02</span></li>
			<li><i>3</i><em>就业将之03</em><span>03</span></li>
			<li><i>4</i><em>就业将之04</em><span>04</span></li>
			<li><i>5</i><em>就业将之05</em><span>05</span></li>
			<li><i>6</i><em>就业将之06</em><span>06</span></li>
			<li><i>7</i><em>就业将之07</em><span>07</span></li>
			<li><i>8</i><em>就业将之08</em><span>08</span></li>
		</ul>
	</div>
	<div class="bottom_title">代办事项</div>
	<div class="content_module l">
		<div class="top clear">
			<span>订单管理</span>
			<ul class="clear">
				<li class="active">待审核 <i>7</i></li>
				<li>待支付 <i>7</i></li>
				<li>支付待确认 <i class="green">7</i></li>
				<li>办理中 <i>7</i></li>
				<li>待完结 <i>7</i></li>
			</ul>
		</div>
		<div class="bottom">
			<ul>
				<li>
					<span>创业套餐</span>
					<span>18151151513</span>
					<span>201402221212121</span>
					<span>2017-04-26 11:05:26</span>
					<a href="">进入审核</a>
				</li>
				<li>
					<span>创业套餐</span>
					<span>18151151513</span>
					<span>201402221212121</span>
					<span>2017-04-26 11:05:26</span>
					<a href="">进入审核</a>
				</li>
				<li>
					<span>创业套餐</span>
					<span>18151151513</span>
					<span>201402221212121</span>
					<span>2017-04-26 11:05:26</span>
					<a href="">进入审核</a>
				</li>
				<li>
					<span>创业套餐</span>
					<span>18151151513</span>
					<span>201402221212121</span>
					<span>2017-04-26 11:05:26</span>
					<a href="">进入审核</a>
				</li>
			</ul>
		</div>
		<div class="more"><a href="">全部&gt;</a></div>
	</div>
	<div class="content_module r">
		<div class="top clear">
			<span>视频验证管理</span>
			<ul class="clear">
				<li class="active">待预约 <i>7</i></li>
				<li>预约中 <i>7</i></li>
				<li>今日视频 <i>7</i></li>
				<li>待验证 <i>7</i></li>
			</ul>
		</div>
		<div class="bottom">
			<ul>
				<li>
					<span>创业套餐</span>
					<span>18151151513</span>
					<span>201402221212121</span>
					<span>2017-04-26 11:05:26</span>
					<a href="">进行中</a>
				</li>
				<li>
					<span>创业套餐</span>
					<span>18151151513</span>
					<span>201402221212121</span>
					<span>2017-04-26 11:05:26</span>
					<a href="">接受视频</a>
				</li>
				<li>
					<span>创业套餐</span>
					<span>18151151513</span>
					<span>201402221212121</span>
					<span>2017-04-26 11:05:26</span>
					<a href="">接受视频</a>
				</li>
				<li>
					<span>创业套餐</span>
					<span>18151151513</span>
					<span>201402221212121</span>
					<span>距开始剩余10分钟</span>
					<a href="">等待开启</a>
				</li>
			</ul>
		</div>
		<div class="more"><a href="">全部&gt;</a></div>
	</div>
	<div class="content_module l">
		<div class="top clear">
			<span>其他</span>
			<ul class="clear">
				<li class="active">公司查询 <i>7</i></li>
				<li>评论管理 <i>7</i></li>
				<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
			</ul>
		</div>
		<div class="bottom">
			<ul>
				<li>
					<span>创业套餐</span>
					<span>18151151513</span>
					<span>201402221212121</span>
					<span>2017-04-26 11:05:26</span>
					<a href="">立刻处理</a>
				</li>
				<li>
					<span>创业套餐</span>
					<span>18151151513</span>
					<span>201402221212121</span>
					<span>2017-04-26 11:05:26</span>
					<a href="">立刻处理</a>
				</li>
				<li>
					<span>创业套餐</span>
					<span>18151151513</span>
					<span>201402221212121</span>
					<span>2017-04-26 11:05:26</span>
					<a href="">立刻处理</a>
				</li>
				<li>
					<span>创业套餐</span>
					<span>18151151513</span>
					<span>201402221212121</span>
					<span>2017-04-26 11:05:26</span>
					<a href="">立刻处理</a>
				</li>
			</ul>
		</div>
		<div class="more"><a href="">全部&gt;</a></div>
	</div>
</div>
<script src="je_date/jedate.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/echarts-all.js"></script>
<script type="text/javascript">
    var cjhq_chart ;
    var option = {
        title: {
            x: 'left',
            text: '数据统计'

        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            x:'center',
            y:'bottom',
            data:['2017/04/27 浏览量用户','2017/04/28 浏览量用户']//数组
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            borderColor:'#fff',
            containLabel: true
        },
        xAxis : [
            {
                type: 'category',
                boundaryGap : false,
                data : ["0时","4时","8时","12时","16时","20时","24时"],//数组
                splitLine:{
                    show:false
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                splitLine:{
                    show:false
                }
            }

        ],
        series : [
            {
                name:'2017/04/27 浏览量用户',
                type:'line',
                stack: '总量',
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'2017/04/28 浏览量用户',
                type:'line',
                stack: '总量',
                data:[220, 182, 191, 234, 290, 330, 310]
            }
        ]
    };
    cjhq_chart = echarts.init(document.getElementById('chart_form'));
    cjhq_chart.setOption(option, true);
</script>
<script>
    jeDate({
        dateCell: "#start-data",//isinitVal:true,
        format: "YYYY-MM-DD",
        isTime: false, //isClear:false,
        minDate: "1945-10-1 00:00:00"
    });
    jeDate({
        dateCell: "#end-data",//isinitVal:true,
        format: "YYYY-MM-DD",
        isTime: false, //isClear:false,
        minDate: "1945-10-1 00:00:00"
    });

    $(function () {
        $(".xw_btn").click(function () {
            $(".cat_option").show();
        });
        $(".btn-s").click(function(){
            var start_date = new Date($("#start-data").val());
            var end_date = new Date($("#end-data").val());
            if(start_date > end_date){
                alert('开始日期不能大于结束日期');return;
            }else if((end_date.getTime() - start_date.getTime()) / 86400000 > 30){
                alert('日期的跨度不能超过一个月');return;
            }
        });
        $(".bottom_warp .content_module .top ul li").click(function () {
            $(this).parent("ul").children("li").removeClass("active");
            $(this).addClass("active");
        })
    })
</script>
</body>
</html>